<template>
  <div>
    <div class="mt-8 p-4 shadow-lg" v-for="(item, i) in groupStore.group" :key="i"
      :class="{cos: fieldStore.curColumn == item.column}"
      @click="fieldStore.setCurColumn(item.column)">
      <div class="flex gap-4 items-center p-4 bg-[#f0f0f0]">
        <div class="text-lg text-nowrap">{{ item.prop }} ({{ item.label || '未设置' }})</div>
        <div class="text-nowrap">筛选：</div><el-input v-model="item.keyword"
          @change="groupStore.setKeyword(i, item.keyword)"></el-input>
      </div>

      <div class="flex gap-4 items-center mt-4">
        <el-button @click="onRow(item, 2)">2列</el-button>
        <el-button @click="onRow(item, 3)">3列</el-button>
        <el-button @click="onRow(item, 4)">4列</el-button>
        <el-button type="danger" @click="item.column = []">清空</el-button>
        <div class="text-nowrap">添加属性：</div>
        <el-input v-model="newObj.prop" placeholder="属性名称"></el-input>
        <el-input v-model="newObj.label" placeholder="标签"></el-input>

        <el-select v-model="newObj.type" placeholder="Select">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-button @click="onAdd(item)">确定</el-button>

        <el-input v-model="item.labelWidth" placeholder="标签宽度"></el-input>

      </div>
      <div class="flex gap-4 items-center mt-4 flex-wrap">
        <el-tag v-for="tag in item.column" :type="tag == fieldStore.curField ? 'warning' : 'info'"
          @click="fieldStore.setCurField(tag)" class="cursor-pointer" :key="tag.prop" closable
          :disable-transitions="false" @close="deleteItem(item.column, tag)">
          {{ tag.label }}
        </el-tag>
      </div>

      <div class="my-3 h-1 bg-[#999]"></div>

      <div class="flex gap-4 items-center mt-4 flex-wrap">
        <el-tag v-for="tag in item.filterColumn" type="success" class="cursor-pointer" @click="item.column.push(tag)"
          :key="tag.prop" :disable-transitions="false">
          {{ tag.label }}
        </el-tag>
      </div>
    </div>
  </div>

</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { useFieldStore } from '@/stores/field';
import { useGroupStore } from '@/stores/group';
import { useOptionStore } from '@/stores/option';


const fieldStore = useFieldStore()
const groupStore = useGroupStore()
const { options } = useOptionStore()

const newObj = ref({
  prop: '',
  label: '',
  type: ''
})

const onAdd = (item) => {
  const obj = {
    "type": newObj.value.type || "input",
    "span": 12,
    "order": 99,
    "addDisplay": true,
    "editDisplay": true,
    "viewDisplay": true,
    "prop": newObj.value.prop,
    "label": newObj.value.label
  }
  console.log("obj", obj)
  // tabList.value.push(obj)
  item.column.push(obj)
}

const onRow = (item, n) => {
  item.span = 24 / n
}


const deleteItem = (list, tag) => {
  list.splice(list.indexOf(tag), 1)
}


const addDicName = (list) => {
  list.forEach(i => {
    if (i.dicName) {
      i.type = "select";
      i.dicUrl = "/system/dict/dictionary?code=" + i.dicName;
      i.props = {
        label: "dictValue",
        value: "dictKey"
      }
      delete i.dicName
    }
  })
}
</script>

<style scoped>
.cos{
  border: solid 2px rgb(239, 105, 2);
}
</style>